<!-- @Author: Yu_Bo -->
<template>
	<view class="outbound">
		<view class="outbound_tab">
			<u-tabs :list="navList" :is-scroll="false" :current="current" @change="change"></u-tabs>
		</view>
		<!--  -->
		<view class="buying_list">
			<view class="list" v-for="(item,index) in list" :key="index">
				<view class="list_title">
					<view class="left">
						订单编号：{{item.order_no}}
					</view>
					<view class="right">
						<text class="color2" v-if="current == 0">待出库</text>
						<text class="color3" v-if="current == 1">已出库</text>
					</view>
				</view>
				<!-- 待出库 -->
				<view class="book_img" v-if="current == 0">
					<view class="img_list">
						<view class="img" v-for="(ite,idx) in item.goods_order" :key="idx">
							<image :src="ite.image" mode="aspectFill"></image>
						</view>
					</view>
					<view class="img_bot">
						<view class="left">
							{{item.createtime}}
						</view>
						<view class="btn" @click="detailsBtn(item)">
							点击查看
						</view>
					</view>
				</view>
				<view class="book_list" v-if="current == 1">
					<view class="list_order">
						<view class="img">
							<image :src="item.image" mode="aspectFill"></image>
						</view>
						<view class="info">
							<view class="title line_one">
								{{item.goods_name}}
							</view>
							<view class="txt line_one">
								{{item.author}}/{{item.press}}
							</view>
							<view class="txt">
								入库人员：{{item.username}}
								<text style="padding: 10rpx;"></text>
								ID：{{item.operator_id}}
							</view>
							<view class="bot">
								<text>剩余库存：{{item.stock}}</text>
								<text>x1</text>
							</view>
							<view class="txt" v-if="item.supply">
								可调拨量：{{item.supply}}
							</view>
							<view class="txt">
								出库时间：{{item.createtime}}
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="mall_loading" v-if="list.length">
				<u-loadmore :status="status" color='#999' font-size='26' />
			</view>
		</view>
		<!-- 无数据 -->
		<c-emptydata :type="3" v-if="list.length == 0"></c-emptydata>
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return{
				navList: [{
						name: '待出库'
					},
					{
						name: '已出库'
					},
				],
				current: 0,
				list: [],
				page: 1,
				status: 'loadmore',//加载前值为loadmore，加载中为loading，没有数据为nomore
			}
		},
		computed: {},
		onLoad() {},
		onShow() {
			this.getList()
		},
		methods: {
			// 切换
			change(index) {
				this.current = index
				this.status = "loadmore"
				this.list = []
				this.pages = 1
				this.getList()
			},
			// 列表
			getList() {
				var that = this
				that.status = 'loading'
				if(that.current == 0) {
					var params = {
						page: that.page,
					}
					that.$httpApi.outOrder(params).then((res) => {
						if (res.code == 1) {
							if(that.page == 1) {
								that.list = []
							}
							if(res.data && res.data.length == 10) {
								that.list=that.list.concat(res.data)
								that.status = "loadmore"
							} else if(res.data && res.data.length < 10) {
								that.list=that.list.concat(res.data)
								that.status = "nomore"
							} else {
								that.status = "nomore"
							}
						}
					})
				} else {
					var params = {
						page: that.page,
					}
					that.$httpApi.outLog(params).then((res) => {
						if (res.code == 1) {
							if(res.data && res.data.length == 10) {
								that.list=that.list.concat(res.data)
								that.status = "loadmore"
							} else if(res.data && res.data.length < 10) {
								that.list=that.list.concat(res.data)
								that.status = "nomore"
							} else {
								that.status = "nomore"
							}
						}
					})
				}
			},
			// 查看详情
			detailsBtn(item) {
				this.$navToLogin("/pagesWo/outbound/details?id=" + item.id)
			},
		},
		onReachBottom(){
			 if(this.status == 'nomore' || this.status == 'loading'){
			 	return
			 }
			 this.page++
			 this.search()
		}
	}
</script>

<style lang='scss' scoped>
	.outbound {
		width: 100%;
		min-height: 100vh;
		background: #f6f6f6;
	}
	
	.outbound_tab {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 1;
		width: 100%;
		height: 100rpx;
		background: #ffffff;
	}
	
	.buying_list {
		width: 100%;
		padding: 100rpx 30rpx 30rpx;
		
		.list {
			width: 100%;
			margin-top: 30rpx;
			padding: 0 30rpx 30rpx;
			background: #FFFFFF;
			border-radius: 20rpx;
			
			.list_title {
				width: 100%;
				height: 85rpx;
				border-bottom: 2rpx solid #F6F6F6;
				display: flex;
				align-items: center;
				justify-content: space-between;
				
				.left {
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #222222;
				}
				
				.right {
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					display: flex;
					
					.color1 {
						color: #FF5E5E;
					}
					
					.color2 {
						color: #FF9400;
					}
					
					.color3 {
						color: #5A68FF;
					}
					
					.color4 {
						color: #999999;
					}
				}
			}
			
			.book_img {
				width: 100%;
				
				.img_list {
					width: 100%;
					margin-top: 30rpx;
					display: flex;
					
					.img {
						width: 140rpx;
						height: 188rpx;
						margin-right: 30rpx;
						
						image {
							display: block;
							width: 100%;
							height: 100%;
						}
					}
					
					.img:nth-child(4n) {
						margin-right: 0;
					}
				}
				
				.img_bot {
					width: 100%;
					margin-top: 30rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					
					.left {
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 24rpx;
						color: #666666;
					}
					
					.btn {
						width: 144rpx;
						line-height: 58rpx;
						text-align: center;
						border-radius: 29rpx;
						border: 2rpx solid #5A68FF;
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 24rpx;
						color: #5A68FF;
					}
				}
			}
			
			.book_list {
				width: 100%;
				margin-top: 30rpx;
				
				.list_order {
					width: 100%;
					display: flex;
					justify-content: space-between;
					
					.img {
						width: 140rpx;
						height: 188rpx;
						
						image {
							display: block;
							width: 100%;
							height: 100%;
						}
					}
					
					.info {
						width: calc(100% - 140rpx);
						padding-left: 30rpx;
						
						.title {
							width: 100%;
							font-family: PingFang SC, PingFang SC;
							font-weight: 500;
							font-size: 32rpx;
							color: #222222;
						}
						
						.txt {
							width: 100%;
							padding-top: 15rpx;
							font-family: PingFang SC, PingFang SC;
							font-weight: 400;
							font-size: 24rpx;
							color: #666666;
						}
						
						.bot {
							width: 100%;
							padding-top: 15rpx;
							font-family: PingFang SC, PingFang SC;
							font-weight: 400;
							font-size: 24rpx;
							color: #666666;
							display: flex;
							align-items: center;
							justify-content: space-between;
						}
					}
				}
			}
		}
	}
</style>